<template>
  <div style="background-color: #fff">
<!--    <div style="position: sticky;top: 0;z-index: 99">-->
<!--      <Myheader></Myheader>-->
<!--    </div>-->
    <div class="page">
      <h1 style="text-align: center;margin-bottom: 12px;">
        {{ $route.query.nianfen }}本科生
      </h1>
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in classList"
          :key="index"
          :span="6"
          style="margin-bottom: 30px;"
        >
          <el-card>
            <img
              :src="`http://localhost:8087/dev-api${item.zhaopian}`"
              class="image"
            />
            <div style="margin-top: 12px;">
              <div class="bottom clearfix">
                <time class="time">{{ item.mingcheng }}</time>
                <el-button
                  type="text"
                  class="button"
                  @click="handleDetail(item.mingcheng)"
                  >查看详情</el-button
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- <div style="margin: 30px  0;display: flex;justify-content: flex-end;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div> -->
    </div>

<!--    <div>-->
<!--      <MyBottom></MyBottom>-->
<!--    </div>-->
  </div>
</template>

<script>
import Myheader from "./header.vue";
import MyBottom from "./bottom.vue";
import { getClassDetail } from "@/api";
export default {
  name: "alumnus",
  data() {
    return {
      classList: []
    };
  },
  components: {
    Myheader,
    MyBottom
  },
  methods: {
    handleDetail(mingcheng) {
      this.$router.push({
        path: "/classDetail",
        query: { mingcheng }
      });
    }
  },
  mounted() {
    getClassDetail({
      nianfen: this.$route.query.nianfen,
      xueli: this.$route.query.xueli
    })
      .then(res => {
        console.log("res:!!!!!! ", res);
        this.classList = res.data;
      })
      .catch(err => {
        console.log("err: ", err);
      });
  }
};
</script>

<style scoped>
.page {
  padding: 10px 100px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
